<template>
  <section>
    <div style="border-bottom:1px solid #eee;padding-bottom:10px;">
      <el-page-header @back="goBack" content="还账">
      </el-page-header>
    </div>
    <br>
    <div class="visit_detail_box">
      <div class="userinfo p-sm">
        <p>
          <img v-if="detail.head!=''" :src="detail.head | imageUrl" class="patient_img" alt />
          <img v-else src="/img/unknown-avatar.4f0c79ac.png" class="patient_img" alt />
        </p>
        <p>
          <span style="font-size: 20px; margin-right: 20px; vertical-align: middle;">{{detail.name}}</span>
          <i class="glyphicon glyphicon-earphone" style="vertical-align: middle; font-size: 18px;"></i>
        </p>
        <div class="user-field">
          <span>挂账：</span>
          ￥{{detail.chargeToTheRoom?detail.chargeToTheRoom:0 | changeMoneyToTwo}}
        </div>
        <div class="user-field">
          <span>性别：</span>
          {{detail.sex | toSex}}
        </div>
        <div class="user-field">
          <span>年龄：</span>
          <!-- <label v-if="detail.age>7">{{detail.age}}岁</label>
          <label v-if="detail.age<7">{{detail.age}}岁{{detail.sdfMonth}}月{{detail.sdfDay}}天</label> -->
          <label v-if="detail.age>17">{{detail.age}}</label>
          <label v-else>{{detail.birthday|toTimeContrast}}</label>
        </div>
        <!-- <div class="user-field">
        <span>婚姻状况：</span>
      </div> -->
        <div class="user-field">
          <span>门诊号：</span>
          <span style="color: red;"> {{detail.archivesCode}}</span>
        </div>
        <div class="user-field">
          <span>就诊日期：</span>
          <span> {{detail.lastVisitTime | changeTime}}</span>
        </div>
        <!-- <div class="user-field">
        <span>初步诊断：</span>
        <span style="color: red;">￥ {{detail.money}}</span>
      </div> -->
      </div>
      <div class="user-content p-sm">
        <el-row style="margin:10px 0px;display:inline-block;width:100%;border-bottom:1px solid #ddd;padding-bottom:20px;">
          <el-col :span="6">
            <label style="font-size:16px;">还账</label>
          </el-col>
          <el-col style="height:10px;" :span="6"></el-col>
          <el-col style="height:10px;" :span="6"></el-col>
          <el-col style="height:10px;" :span="6">
            <!-- <el-button @click="opReturn()" style="float:right;">{{return_label}}</el-button> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form :model="form" label-width="120px">
              <el-form-item label="支付方式：">
                <el-radio-group v-model="form.source">
                  <!-- <el-radio class="repay_check" :label="6">余额</el-radio> -->
                  <el-radio class="repay_check" :label="7">现金</el-radio>
                  <!-- <el-radio class="repay_check" :label="8">支付宝</el-radio>
                      <el-radio class="repay_check" :label="9">微信</el-radio>
                      <el-radio class="repay_check" :label="10">银行卡</el-radio>
                      <el-radio class="repay_check" :label="12">赠送余额</el-radio> -->
                </el-radio-group>
              </el-form-item>
              <el-form-item label="应收金额：">
                <label>￥{{amount}}</label>
              </el-form-item>
              <el-form-item label="还款金额：">
                <el-input class="return_input" placeholder="请输入内容" @blur="getDiner" v-model="form.amount">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="找零：">
                {{diner}}元
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-button class="btn_account" @click="onSubmit">￥收费</el-button>
        </el-row>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: "chargeDetail",
  data() {
    return {
      form: {
        amount: "",
        id: 0,
        source: 7
      },
      diner: 0,
      amount: 0,
      totalMoney: "",
      detail: "",
      active: false,
      ispersonal: true
    };
  },
  created() {},
  mounted() {
    let th = this;
    th.findUsUserById();
  },
  methods: {
    findUsUserById() {
      let th = this;
      th.showLoading();
      let uid = th.jieMi(th.$route.query.patientId);
      th.amount = th.$route.query.amount;
      th.totalMoney = th.$route.query.amount;
      th.form.id = th.$route.query.id;
      th.$api
        .getThePatientLibraryById({ patientId: uid, hpId: th.adminUser.hpId })
        .then(res => {
          if (res.executed) {
            th.showLoading(false);
            th.detail = res.thePatientLibraryDetail;
            th.active = true;
            th.ispersonal = false;
          }
        });
    },
    getDiner() {
      let th = this;
      let amount = th.form.amount;
      if (amount != "") {
        if (Number(amount) < 0) {
          th.$message.error("请输入正确的还账金额！");
          return false;
        } else {
          th.diner = Number(amount - th.totalMoney).toFixed(2);
        }
      } else {
        th.$message.error("请输入正确的还账金额！");
        return false;
      }
    },
    onSubmit() {
      let th = this;
      let j = {};
      j = Object.assign(j, th.form);
      th.$api.returnDiscount(j).then(res => {
        if (res.executed) {
          th.$message.success("支付成功");
          th.$router.push({
            path: "/page/chargeIndex",
            query: th.getUrlToken({ type: 4 })
          });
        } else {
          th.$message.error(res.message);
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../_css/detail.scss";
.patient_img {
  border: 1px solid #ddd;
  border-radius: 5px;
  display: inline-block;
  width: 100px;
  height: 100px;
}
.durg_title {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.money_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  .other {
    height: 10px;
    display: inline-block;
  }
  .money {
    text-align: right;
    padding-right: 10px;
    display: inline-block;
  }
}
.printOrder {
  display: inline-block;
  width: 100%;
}
.user-content {
  border-left: 1px solid #ddd;
  margin-left: -1px;
}
.userinfo {
  border-right: 1px solid #ddd;
}
.return_input {
  width: 40%;
}
.btn_account {
  margin-left: 37px;
}
</style>

